<template>
  <div>
    <kinds_drawer ref="drawer" :type="'GOOD'"></kinds_drawer>
    <el-container>
      <el-header>
        <el-container>
          <el-header>
            <goods_manager_btn></goods_manager_btn>
          </el-header>
          <el-main class="goods-main">
            <!----商品搜索栏---->
            <el-input
              placeholder="请输入商品名/条码"
              v-model="query"
              prefix-icon="el-icon-search"
              @input="handleQuery"
              @change="selectByQuery"
              style="float:left;width: 40vw;height: 5vh;left: 35vw;position: absolute"
              clearable>
            </el-input>
            <el-button
              @click="show_drawer"
              type="primary"
              class="btn"
              >
              分类选择
            </el-button>
          </el-main>
        </el-container>
      </el-header>
      <el-main>
        <!--表格区域--->
        <goods-table
          style="margin-top: 10vh"
          ref="goodsTable"
          :good-change="changeGood"
          :goods="goods">
        </goods-table>
      </el-main>
    </el-container>
    <add-goods ref="add_goods" :editing="editing" :goodInfo="goodInfo" :hidden="hidden" :dialogFormVisible="dialogFormVisible"></add-goods>
  </div>
</template>

<script>
    import Kinds_drawer from "./goods_manager/kinds_drawer";
    import Goods_manager_btn from "./goods_manager/goods_manager_btn";
    import GoodsTable from "./goods_manager/GoodsTable";
    import AddGoods from "./goods_manager/AddGoods";
    import bus from "../../bus";
    import {exportExcelAll,selectGoods} from "../../services/goodsService";

    export default {
        name: "GoodsManagement",
      components: {GoodsTable, Goods_manager_btn, Kinds_drawer,AddGoods},
      data(){
          return{
            editing:this._mytype.edit.NEW,
            goodInfo:null,
            query:"",
            goods:[],
            dialogFormVisible:false,
            //分类筛选，default为无筛选
            kind:["default"],
            handleQuery:this._func.debounce(this.selectByQuery,2000,false)
          }
      },
      watch:{
        //监听分类筛选条件
        "$store.state.good.kind":function () {
          this.kind=this.$store.state.good.kind;
          this.loadGoods();
        }
      },
      methods:{
          show_drawer(){
            this.$refs.drawer.drawer=true
          },
          add(){
            this.dialogFormVisible=true
            this.goodInfo=null;
            this.editing=this._mytype.edit.NEW;
          },
        /**
         * 隐藏添加面板
         */
        hidden(){
          this.dialogFormVisible=false;
        },
        /**
         * 远程查询
         */
        selectByQuery(){
          if(this.query==''||null){
            this.loadGoods();
            return;
          }
          selectGoods(this.query).then(success=>{
            this.goods=success.data;
          },failed=>{
            this.$message({
              type:'error',
              message:'商品查询失败',
            })
          })
        },

        loadGoods(){
          var _this=this
          if(_this.kind.length==0){
            _this.goods=[];
            return;
          }
          this.$axios.post('/goods/goods/kid',_this.kind).then(resp=>{
            if(resp && resp.status == 200){
              _this.goods = resp.data
            }
          })
        },
        /**
         *删除被选择的商品
         */
        del(){
          var _this=this
          this.$axios.post('/goods/delete', this.$refs.goodsTable.selected_kinds()).then(resp => {
            if (resp && resp.status === 200) {
              this.loadGoods()
              this.$message({
                message:'删除成功',
                type:'success'
              })
            }
          }).catch(res=>{
            alert(JSON.stringify(this.$refs.goodsTable.selected_kinds()))
          })
        },
        /**
         * 修改商品信息
         */
        changeGood(index, goodInfo){
          this.dialogFormVisible=true
          this.editing=this._mytype.edit.EDIT;
          this.goodInfo=goodInfo;
          this.loadGoods();
        },
        /**
         * 导出商品Excel文件
         */
        exportAll(){
          exportExcelAll({}).then(resp=>{
            this.downloadFile(resp);
          })
        },
        /**
         * 文件导出
         */
        downloadFile(data) {
          if (!data) {
            return
          }
          const link = document.createElement('a');
          let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);

          link.setAttribute('download', '商品列表' + '.xls');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        },
      },
      mounted() {
        bus.$on('add',res=>{
          this.add()
        })
        bus.$on('loadGoods',res=>{
          this.loadGoods()
        })
        bus.$on('del',res=>{
          this.del()
        })
        bus.$on('exportAll',res=>{
          this.exportAll();
        })

      },
      created() {
        this.$store.commit("good/clearKind");
        this.loadGoods();
      }
    }
</script>

<style scoped>
body{
  margin: 0;
}
.goods-main .btn{
  width: 10vw;
  height: auto;
  position: absolute;
  right: 0;
  font-size: 2vh
}
</style>
